<template>
	<view class="">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<template #top>
				<view class="" slot="top" style="background-color: #F8F8F8;">
					<u-navbar :border-bottom="false" title="关单卫检" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background:'#f8f8f8'}" >
						<template #right>
							<view class="u-p-r-20"  @click="$mRouter.push({route:'/pages/owners/billofEntryMange/editBillofEntry?type=add'})" >
								新增
							</view>
						</template>
					</u-navbar>
					<z-tabs ref="tabs"  :list="tabList" :current="current" :bgColor="'#f8f8f8'"  @change="tabsChange" :bar-height="0" :active-color="'#333'" :inactive-color="'#999'" :active-style="activeStyle" :inactive-style="inactiveStyle"></z-tabs>
				</view>
			</template>
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="current" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" >
					<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
					<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
						<no-list ref="noList"></no-list>
				</swiper-item>
				<swiper-item class="swiper-item" >
						<item-list ref="itemList"></item-list>
				</swiper-item>
			</swiper>
			
		</z-paging-swiper>
		<view class="add-btn" v-if="isCollection" @click="$mRouter.push({ route: '/pages/sale/payorder/chooseShop' })">
			
		</view>
	</view>
	
</template>

<script>
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	import NoList from './NoList.vue'
	import ItemList from './ItemList.vue'
	export default {
		name:'bill-of-entry',
		components:{NoList,ItemList},
		data() {
			return {
				tabList: [
					{
						name:'合同号',
						value:0
					},
					{
						name:'商品',
						value:1
					},
					],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				activeStyle:{
					fontWeight:'bold',
					fontSize:'32rpx',
				},
				inactiveStyle:{
					fontSize:'28rpx',
				}
			}
		},
		computed:{
			...mapState(useUserStore,['isCollection']),
		},
		methods: {
			Refresh(){
				if(this.current === 0){
					this.$refs.noList.reloadFn()
				}else{
					this.current = 0;
					this.$refs.noList.reloadFn()
				};
			},
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			//swiper滑动结束
			animationfinish(e) {
				let current = e.detail.current;
				this.current = current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {	
		height: 100%;
	}
</style>
